<script setup lang="ts">
import {ref} from 'vue';
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Pagination, Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import {
  User, Search, Location, Clock, Service,
  PhoneFilled, Top, ChatDotRound, Promotion, Share
} from '@element-plus/icons-vue';

const swiperModules = [Pagination, Autoplay];
const searchValue = ref('');

const quickServices = [
  {name: '常规保养', icon: 'Tools'},
  {name: '故障维修', icon: 'Warning'},
  {name: '钣金喷漆', icon: 'Brush'},
  {name: '轮胎服务', icon: 'Refresh'}
];

const features = [
  {
    title: '专业维修团队',
    description: '拥有20年以上维修经验的专业技师团队',
    image: 'http://localhost:8080/upload/avatar/img.png'
  },
  {
    title: '原厂配件保障',
    description: '100%原厂配件，品质保证',
    image: 'http://localhost:8080/upload/avatar/img_1.png'
  },
  {
    title: '透明价格承诺',
    description: '标准定价，明码标价，无隐形收费',
    image: 'http://localhost:8080/upload/avatar/img_2.png'
  },
  {
    title: '全程保修服务',
    description: '维修后90天内免费保修',
    image: 'http://localhost:8080/upload/avatar/img_3.png'
  }
];

const popularServices = [
  {
    title: '机油更换',
    description: '使用高品质机油，延长发动机寿命',
    price: '￥298起',
    image: 'http://localhost:8080/upload/avatar/img_4.png'
  },
  {
    title: '轮胎更换',
    description: '专业轮胎更换与动平衡服务',
    price: '￥400起',
    image: 'http://localhost:8080/upload/avatar/img_5.png'
  },
  {
    title: '刹车系统检查',
    description: '全面检查制动系统，确保行车安全',
    price: '￥188起',
    image:  'http://localhost:8080/upload/avatar/img_6.png'
  },
  {
    title: '空调维修',
    description: '专业空调系统检修与加氟服务',
    price: '￥280起',
    image: 'http://localhost:8080/upload/avatar/img_7.png'
  }
];

const stores = [
  {
    name: '车享汽修中心（北京朝阳店）',
    address: '北京市朝阳区建国路88号',
    hours: '周一至周日 08:30-21:00',
    rating: 4.8,
    reviews: 2360,
    image: 'http://localhost:8080/upload/avatar/img_8.png'
  },
  {
    name: '车享汽修中心（北京海淀店）',
    address: '北京市海淀区中关村大街123号',
    hours: '周一至周日 08:30-21:00',
    rating: 4.7,
    reviews: 1890,
    image: 'http://localhost:8080/upload/avatar/img_9.png'
  },
  {
    name: '车享汽修中心（北京西城店）',
    address: '北京市西城区西直门外大街168号',
    hours: '周一至周日 08:30-21:00',
    rating: 4.9,
    reviews: 2156,
    image: 'http://localhost:8080/upload/avatar/img_10.png'
  }
];

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};
</script>

<template>
  <div class="content-container">
    <div class="content-section">
      <div class="py-16 bg-gray-50" id="service-features">
        <div class="max-w-7xl mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12">我们的服务特色</h2>
          <div class="grid grid-cols-4 gap-8">
            <div v-for="feature in features"
                 :key="feature.title"
                 class="bg-white p-6 rounded-lg shadow-sm text-center">
              <img :src="feature.image" :alt="feature.title"
                   class="w-full h-48 object-cover object-top rounded-lg mb-4">
              <h3 class="text-xl font-semibold mb-2">{{ feature.title }}</h3>
              <p class="text-gray-600">{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门服务 -->
      <div class="py-16">
        <div class="max-w-7xl mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12">热门服务项目</h2>
          <swiper
              :modules="swiperModules"
              :slides-per-view="4"
              :space-between="30"
              :pagination="{ clickable: true }"
              :autoplay="{ delay: 3000 }"
          >
            <swiper-slide v-for="service in popularServices" :key="service.title">
              <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <img :src="service.image" :alt="service.title" class="w-full h-48 object-cover object-top">
                <div class="p-4">
                  <h3 class="text-lg font-semibold mb-2">{{ service.title }}</h3>
                  <p class="text-gray-600 text-sm mb-3">{{ service.description }}</p>
                  <p class="text-blue-600 font-semibold">{{ service.price }}</p>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>

      <!-- 门店信息 -->
      <div class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4">
          <h2 class="text-3xl font-bold text-center mb-12">附近门店</h2>
          <div class="grid grid-cols-3 gap-8">
            <div v-for="store in stores"
                 :key="store.name"
                 class="bg-white rounded-lg shadow-sm overflow-hidden">
              <img :src="store.image" :alt="store.name" class="w-full h-48 object-cover object-top">
              <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">{{ store.name }}</h3>
                <p class="text-gray-600 mb-2">
                  <el-icon>
                    <Location/>
                  </el-icon>
                  {{ store.address }}
                </p>
                <p class="text-gray-600 mb-2">
                  <el-icon>
                    <Clock/>
                  </el-icon>
                  {{ store.hours }}
                </p>
                <div class="flex items-center justify-between mt-4">
                  <div class="flex items-center">
                    <el-rate v-model="store.rating" disabled/>
                    <span class="ml-2 text-gray-600">{{ store.reviews }}条评价</span>
                  </div>
                  <button class="bg-blue-600 text-white px-4 py-2 !rounded-button whitespace-nowrap hover:bg-blue-700">
                    一键导航
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <footer class="bg-gray-800 text-white py-12" id="about-us">
        <div class="max-w-7xl mx-auto px-4">
          <div class="grid grid-cols-4 gap-8">
            <div>
              <h4 class="text-lg font-semibold mb-4">联系我们</h4>
              <p class="mb-2">24小时服务热线：400-888-8888</p>
              <p>邮箱：service@autorepair.com</p>
            </div>
            <div>
              <h4 class="text-lg font-semibold mb-4">关于我们</h4>
              <p class="mb-2">公司简介</p>
              <p class="mb-2">服务承诺</p>
              <p>加入我们</p>
            </div>
            <div>
              <h4 class="text-lg font-semibold mb-4">服务支持</h4>
              <p class="mb-2">服务条款</p>
              <p class="mb-2">隐私政策</p>
              <p>常见问题</p>
            </div>
            <div>
              <h4 class="text-lg font-semibold mb-4">关注我们</h4>
              <div class="flex space-x-4">
                <el-icon>
                  <ChatDotRound/>
                </el-icon>
                <el-icon>
                  <Promotion/>
                </el-icon>
                <el-icon>
                  <Share/>
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </footer>

      <!-- 悬浮按钮 -->
      <div class="fixed right-8 bottom-6 space-y-4">
        <button
            class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 !rounded-button whitespace-nowrap">
          <el-icon>
            <Service/>
          </el-icon>
        </button>
        <button
            class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 !rounded-button whitespace-nowrap">
          <el-icon>
            <PhoneFilled/>
          </el-icon>
        </button>
        <button @click="scrollToTop"
                class="bg-gray-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-gray-700 !rounded-button whitespace-nowrap">
          <el-icon>
            <Top/>
          </el-icon>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content-container {
  /* 与Banner高度一致 */
  width: 100%;
}

.content-section {
  max-width: 100%;
  margin: 0 auto;
}
.el-rate {
  --el-rate-void-color: #dcdfe6;
  --el-rate-fill-color: #409eff;
}

.el-input {
  --el-input-hover-border-color: #409eff;
  --el-input-focus-border-color: #409eff;
}
</style>